<template>
  <el-dialog
    :title="view === 'create'? '新增': '编辑'"
    :visible="true"
    custom-class="dialogWrapper"
    :before-close="closeDialog"
    >
    <el-form :model="formData" label-width="110px" ref="ruleForm" :rules="rules">
     <el-form-item label="商户名称" prop="mchtName">
        <el-input v-model.trim="formData.mchtName" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="管理员名称" prop="userName">
        <el-input v-model.trim="formData.userName" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="商户详情" prop="mchtDetails">
        <el-input
          v-model.trim="formData.mchtDetails"
          type="textarea"
         auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="管理员密码" prop="userPwd" v-if=" view === 'create'">
        <el-input v-model.trim="formData.userPwd" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="允许积分兑换" prop="isIntegral" required>
        <el-select v-model.trim="formData.isIntegral">
          <el-option v-for="(item,index) in ['不允许','允许']" :value="String(index)" :label="item" :key="index"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="info" @click="submit('ruleForm')" :disabled="Subabled">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { create, edit } from "@/services/Merchant";
import { RequestError } from "@/services/errors";
import { mapActions } from "vuex";
export default {
  name: "edit-role",
  data () {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择权限'));
      } else {
        callback();
      }
    }
    return {
      menus: [],
      list: [],
      userId:"",
      Subabled:false,
      formData: {
        mchtName: "",
        userName: "",
        mchtDetails: "",
        userPwd:"",
        isIntegral:""
      },
      menuInfo: [],
      dialogFormVisible: false,
      rules: {
        mchtName: [{ required: true, message: "请输入商户名称", trigger: "blur" },
        { min: 1, max: 50, message: '长度在 50个字符以内', trigger: 'blur' }],
        userName: [{ required: true, message: "请输入商户管理员名称", trigger: "blur" },
        { min: 1, max: 50, message: '长度在 50个字符以内', trigger: 'blur' }],
        mchtDetails: [{ required: false, message: "请输入商户详情", trigger: "blur" },
        { min: 1, max: 200, message: '长度在 200个字符以内', trigger: 'blur' }],
        userPwd: [{ required: true, message: "请输入管理员密码", trigger: "blur" }],
        isIntegral: [{ required: true, message: "请选择是否允许积分兑换", trigger: "blur" }],
       }
    }
  },
  props: {
    view: {
      type: String,
      default: "create"
    }
  },
  methods: {
    ...mapActions(["setUserInfo"]),
    closeDialog() {
      this.$emit("close");
    },
    submit(formName) {
      this.Subabled = true;
      this.butTimeOut();
      this.$refs[formName].validate(async valid => {
        if (valid) {
          try {
            if (this.view === "create") {
              await create({
                mchtName: this.formData.mchtName,
                userName: this.formData.userName,
                mchtDetails: this.formData.mchtDetails,
                userPwd: this.formData.userPwd,
                isIntegral:this.formData.isIntegral
              });
            } else {
              await edit({
                mchtId: this.formData.mchtId,
                mchtName: this.formData.mchtName,
                userName: this.formData.userName,
                mchtDetails: this.formData.mchtDetails,
                userId: this.userId,
                isIntegral:this.formData.isIntegral
              });
            }
            this.dialogFormVisible = false;
            this.$emit("close", true);
            this.$message({
              showClose: true,
              message: "提交成功",
              type: "success"
            });
          } catch (e) {
            // this.$alert(e.message, "提示", {
            //   type: "error",
            //   confirmButtonText: "确定"
            // });
            if (e instanceof RequestError) {
              this.$alert(e.message, "提示", {
                type: "error",
                confirmButtonText: "确定"
              });
            } else {
              throw e;
            }
          }
        } else {
          return;
        }
      });
    },
    butTimeOut(){
      var serf = this;
      setTimeout(function(){
        serf.Subabled = false;
      },1200)
    }
  },
  mounted() {}
};
</script>
<style>
.dialogWrapper {
  width: 540px;
}
.el-select {
  width: 100%;
}
.el-textarea__inner{
	height: 100px;
	resize:none;
}
</style>
